<template>
  <div class="inner">
    <div class="comment-user-mes">
      <img src="http://157.122.54.189:9095/assets/images/avatar.jpg" alt />
      <span>{{innerData.account.nickname}}</span>
      <span class="comment-date">{{createDate}}</span>
      <span class="comment-level">{{innerData.level}}</span>
    </div>
    <el-card class="comment-item-inner" v-if="innerData.parent" >
      <detailsComenentInner :innerData="innerData.parent" @innerNickName= "replyInnerTag" />
    </el-card>
    <div >
        {{innerData.content}}
          <el-row type="flex" class="comment-pics" v-if="innerData.pics">
            <el-col v-for="(img, index) in innerData.pics" :key="index" :span="5">
             <img :src="`http://157.122.54.189:9095${img.url}`" alt />
              </el-col>
          </el-row>
    </div>
    <span class="comment-btn" @click="replyInnerTag(innerData.account.nickname, innerData.id)">回复</span>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'detailsComenentInner',
  props: {
    innerData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      createDate: '',
      curId: ''
    }
  },
  methods: {
    replyInnerTag (namem, id) {
      this.$emit('innerNickName', name, id)
    }
  },
  mounted () {
    const day = moment(this.innerData.created_at).format('YYYY-MM-DD HH:mm')
    this.createDate = day
  },
  watch: {
  }
}
</script>

<style lang="less" scoped>
.inner{
    position: relative;
    .comment-user-mes{
      position: relative;
      span{
        font-size: 15px;
      }
      .comment-date{
        font-size: 13px;
        color: gray;
        margin-left: 3px;
      }
      img{
        width: 20px;
        vertical-align: -5px;
      }
      .comment-level{
        position: absolute;
        right: 0;
        font-size: 15px;
        color: gray;
      }
    }
    .comment-pics{
      width: 20%;
        .el-col{
          width: 100%;
          img{
            width: 100%;
          }
        }
    }
    .comment-btn{
      position: absolute;
      right: 5px;
      bottom: 0px;
      font-size: 13px;
      color: transparent;
      &:hover{
        display: block!important;
        color: rgb(61, 252, 252);
        cursor: pointer;
      }
    }
    .comment-item-inner{
      margin: 3px 0;
      /deep/.el-card__body{
        padding: 5;
      }
    }
}
</style>
